<template>
  <div class="per_detail">
    <div class="perform_wrap">
      <el-form
        ref="personAddForm"
        label-width="120px"
        :model="personAddObj"
        :rules="rules"
      >
        <el-form-item :label="$t('person.name')">
          <el-input v-model="personAddObj.username" />
        </el-form-item>
        <el-form-item :label="$t('person.wnumber')">
          <el-input v-model="personAddObj.workNumber" disabled />
        </el-form-item>
        <el-form-item :label="$t('person.mobile')">
          <el-input v-model="personAddObj.mobile" />
        </el-form-item>
        <el-form-item label="部门">
          <selectTree :value="personAddObj.departmentId" @sendDeprtId="getDepartId" />
        </el-form-item>
        <el-form-item label="聘用形式">
          <el-select v-model="personAddObj.formOfEmployment">
            <el-option :value="1" label="正式" />
            <el-option :value="2" label="非正式" />
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="personAddObj.timeOfEntry"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="转正时间">
          <el-date-picker
            v-model="personAddObj.correctionTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="员工头像">
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toAddPerson">保存更新</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
import selectTree from './seltct-tree.vue'
import { addUserApi, getUserInfo, updateEmployee } from '@/api/personnel'

export default {
  components: { selectTree },
  data() {
    return {
      imageUrl: '',
      editId: '', // 编辑的id
      personAddObj: { // 添加员工需要的数据
        correctionTime: '', // 转正时间 "2024-11-29T16:00:00.000Z"
        timeOfEntry: '', // 入职时间 //2024-09-10
        departmentId: 0, // 部门id 通过级.联选择器 获取到数据
        formOfEmployment: '', // 聘用形式   1 2
        mobile: '', // 手机号
        staffPhoto: '', // 默认传空
        username: '', // 用户名
        workNumber: '' // 默认传空.
      },
      rules: {
        username: [{ min: 2, max: 4, message: '用户名长度在2-6之间', trigger: 'blur' }],
        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请选择部门', trigger: 'change' }],
        // 自定义验证规则
        correctionTime: [{ validator: (rule, value, callback) => {
          if (value < this.personAddObj.timeOfEntry) {
            callback(new Error('转正时间必须大于入职时间'))
          } else {
            callback()
          }
        }, trigger: 'change', message: '转正时间必须大于入职时间' }]
      }
    }
  },
  created() {
    // 接受参数 或去详情接口 回显

    console.log(this.$route.query.id, '员工id')
    if (this.$route.query.id) {
      this.editId = this.$route.query.id
      getUserInfo(this.$route.query.id).then(res => { // 回显
        console.log(res, '员工详情')
        this.personAddObj.username = res.data.username
        this.personAddObj.workNumber = res.data.workNumber
        this.personAddObj.mobile = res.data.mobile
        this.personAddObj.formOfEmployment = res.data.formOfEmployment
        this.personAddObj.departmentId = res.data.departmentId
        this.personAddObj.timeOfEntry = res.data.timeOfEntry
        // 转正时间
        this.personAddObj.correctionTime = new Date(res.data.correctionTime)
        this.personAddObj.staffPhoto = res.data.staffPhoto
        this.personAddObj.id = res.data.id
        this.imageUrl = res.data.staffPhoto// 头像
      })
    }
  },
  methods: {
    getDepartId(id) { // 获取子组件传来的部门id
      this.personAddObj.departmentId = id
    },
    toAddPerson() {
      this.$refs.personAddForm.validate(async valid => {
        if (valid) {
          if (this.personAddObj.id) {
            const editRes = await updateEmployee(this.personAddObj)
            console.log(editRes, '-------')
            this.$message.success('编辑成功')
          }
          const res = await addUserApi(this.personAddObj)
          console.log(res, '--------添加')

          this.$message.success('添加成功')
        }
        this.$refs.personAddForm.resetFields()
        this.$router.push('/person/index')
        this.personAddObj.id = ''
      })
    }
  }
}
</script>
<style lang="scss">
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .per_detail{
    padding: 40px ;
    box-sizing: border-box;
    margin-left: 30px;
    margin-top: 30px;
  }
  .perform_wrap{
    width: 1200px;

  }
</style>
